<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入 ElementUI 样式 -->
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css" />
    <script src="../js/vue.js"></script>
    <!-- 引入 ElementUI 组件库 -->
    <script src="../js/index.js"></script>
  </head>
  <body>
    <div id="app">
      <el-table size="small" :data="tableData" stripe="true" highlight-current-row>
        <el-table-column prop="date" label="日期"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column label="操作" align="center">
          <!--
              slot-scope：作用域插槽，可以获取表格数据
              scope：代表表格数据，可以通过 scope.row 来获取表格当前行数据，scope 不是固定写法
          -->
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="handleUpdate(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="mini"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            tableData: [
              {
                date: "2016-05-02",
                name: "王小虎",
                address: "上海市普陀区金沙江路 1518 弄",
              },
              {
                date: "2016-05-04",
                name: "王小虎",
                address: "上海市普陀区金沙江路 1517 弄",
              },
              {
                date: "2016-05-01",
                name: "王小虎",
                address: "上海市普陀区金沙江路 1519 弄",
              },
            ],
          };
        },
        methods: {
          // 定义 VUE 对象的方法
          handleUpdate(row) {
            alert(row.name);
          },
          handleDelete(row) {
            alert(row.date);
          },
        },
      });
    </script>
  </body>
</html>
